<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart City</title>
    <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='images/favicon.png' )}}"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/monitor.css') }}">
</head>
<body>
    <header>
        <nav class="z-depth-0">
            <div class="nav-wrapper">
                <!-- <img src="{{ url_for('static', filename='images/csd_logo.png') }}" alt="csd_logo" class="csd_logo">  -->
                <a href="{{ url_for('home') }}" class="brand-logo left logo"> Smart City </a>
                <a href="#" data-target="mobile-links" class="sidenav-trigger"><i class="material-icons">menu</i></a>
                <ul id="nav-mobile" class="right hide-on-med-and-down"> 
                    <li><a href="{{ url_for('home') }}"><i class="material-icons left">home</i>Home</a></li>
                    <li><a href="{{ url_for('bots') }}">Bots</a></li>
                    <li><a href="{{ url_for('live_feed') }}"><i class="material-icons left">videocam</i>Video</a></li>
                </ul>
            </div>
        </nav>
        <ul class="sidenav" id="mobile-links">
            <li><a href="{{ url_for('home') }}"><i class="material-icons left">home</i>Home</a></li>
            <li><a href="{{ url_for('bots') }}">Bots</a></li>
            <li><a href="{{ url_for('live_feed') }}"><i class="material-icons left">videocam</i>Video</a></li>
        </ul>
    </header>

    <main>
        {% block home_page_housing %}
        {% endblock home_page_housing %}
    
        {% block home_page_bots %}
        {% endblock home_page_bots %}

        {% block smart_home %}
        {% endblock smart_home %}

        <div class="container web_cam_stylings">
            {% block webcam_feed %}
            {% endblock webcam_feed %}
        </div>
    </main>

    <footer class="page-footer">
        <div class="container footer_stylings">
            <div class="row">
                <div class="col l6 s12">
                    <h5 class="white-text">About smart city</h5>
                    <p class="grey-text text-lighten-4">
                        Smart city is a project done by a group of students as a part of ME867 course (Theory & practice of sensors and actuators).
                    </p>
                </div>
            </div>
        </div>
        <div class="footer-copyright">
            © 2019 Center for System Design, NITK Surathkal
            <div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
        </div>
    </footer>
    <script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/materialise-custom.js') }}"></script>
    {% block house_static %}{% endblock house_static %}
</body>
</html>